<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <name-title :lists = "goodList"/>
      </thead>
      <tbody>
        <king-hero :names= "item.name" :prices = "item.price" :nums = "item.num" :items= "item" :dexs = "index" @dels = "delyx" v-for="(item,index) in goodList" :key="index"/>
      </tbody>
      <tfoot>
        <total-price :gdlist = "goodList"/>
      </tfoot>
    </table>
  </div>
</template>

<script>
// 标头全选
import nameTitle from './components/nameTitle.vue'
// 王者人物
import kingHero from './components/KingHero.vue'
// 总合
import totalPrice from './components/totalPrice.vue'
export default {
  data () {
    return {
      goodList: [
        {
          name: '诸葛亮',
          price: 1000,
          num: 1,
          checked: false
        },
        {
          name: '蔡文姬',
          price: 1500,
          num: 1,
          checked: false
        },
        {
          name: '妲己',
          price: 2000,
          num: 1,
          checked: false
        },
        {
          name: '鲁班',
          price: 2200,
          num: 1,
          checked: false
        }
      ]
    }
  },
  components: {
    nameTitle,
    kingHero,
    totalPrice
  },
  methods: {
    delyx (deyx) {
      this.goodList.splice(deyx, 1)
    }
  }
}
</script>

<style>
</style>
